.sui-steps {
    font-size: 0px;
    overflow: hidden;
    line-height: 0px;
    margin: @baseMargin 0px;
    .wrap {
        display: inline-block;
    }
    .wrap > div {
        width: @stepsBaseWidth;
        height: @stepsBaseHeight;
        display: inline-block;
        line-height: @stepsBaseHeight;
        vertical-align: top;
        font-size: @baseFontSize;
        position: relative;
        > label {
            margin-left: @stepsBaseHeight / 2 + 10px;
            cursor: default;
        }
    }
    .triangle-right {
        display: inline-block;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: @stepsBaseHeight / 2;
        position: absolute;
        right: -@stepsBaseHeight + 1; //加一个1px，fix wrap带来的宽度
        z-index: 1;
    }
    .triangle-right-bg {
        .triangle-right;
        border-width: @stepsBaseHeight / 2 + 4;
        right: -@stepsBaseHeight -  4 * 2;
        border-color: transparent transparent transparent #FFF;
        top: -4px;
    }

    .round {
        display: inline-block;
        width: @baseFontSize;  
        height: @baseFontSize;
        .border-radius(@baseFontSize / 2);
        text-align: center;
        line-height: @baseFontSize;
    }
    .round + span:before {
        content: '\00a0';
    }
    .finished {
        background-color: @stepsFinishedColor;
        color: @stepsFinishedTextColor;
         .triangle-right {
            border-color: transparent transparent transparent @stepsFinishedColor;
        }
        .round {
            background-color: @stepsCurrentColor;
            background-color: transparent\9;
            color: @white;
        }
    }
    .current {
        background-color: @stepsCurrentColor;
        color: @stepsCurrentTextColor;
         .triangle-right {
            border-color: transparent transparent transparent @stepsCurrentColor;
        }
        .round {
            background-color: @white;
            color: @stepsCurrentColor;
            color: #FFF\9;
            background-color: transparent\9;
        }
    }
    .todo {
        background-color: @stepsTodoColor;
        color : @stepsTodoTextColor;
         .triangle-right {
            border-color: transparent transparent transparent @stepsTodoColor;
        }
        .round {
            background-color: @white;
            background-color: transparent\9;
        }
    }
}

.steps-large {
    .wrap > div {
        font-size: @fontSizeLarge;
        width: @stepsBaseWidth * 1.5;
        height: @stepsBaseHeight * 1.5;
        line-height: @stepsBaseHeight * 1.5;
        > label {
            font-size: @fontSizeLarge;
            margin-left: @stepsBaseHeight * 1.5 / 2 + 10px;
        }
    }
    .triangle-right {
        border-width: @stepsBaseHeight * 1.5 / 2;
        right: -@stepsBaseHeight * 1.5 + 1;
    }
    .triangle-right-bg {
        border-width: @stepsBaseHeight * 1.5 / 2 + 4;
        right: -@stepsBaseHeight * 1.5 -  4 * 2;
    }
    .round {
        width: @fontSizeLarge;  
        height: @fontSizeLarge;
        line-height: @fontSizeLarge;
        .border-radius(@fontSizeLarge / 2);
    }
}
.steps-auto {
    display: table;
    width: 100%;
    .wrap  {
        display: table-cell;
        > div {
            width: 100%;
        }

    }
}
.sui-steps-round {
    font-size: 0px;
    overflow: hidden;
    line-height: 0px;
    margin: @baseMargin 0px;
    padding: 0px @baseFontSize / 2;
    > div {
        display: inline-block;
        vertical-align: top;
        .wrap {
            .clearfix; 
        } 
        > label {
            display: inline-block;
            width: 80%;
            .text-overflow(); 
            font-size: @baseFontSize;
            line-height: @baseFontSize;
            height: @baseFontSize; 
            margin-left: -@baseFontSize / 2;
            margin-top: @baseFontSize / 2;
            color: @stepsFinishedTextColor;
            cursor: default;
        }
        .round {
            width: 22px;
            height: 22px;
            .border-radius(15px);
            display: inline-block;
            vertical-align: middle;
            font-size: @baseFontSize;
            color: #FFF;
            line-height: 22px;
            text-align: center;
            float: left;
        }
        .bar {
            margin: 10px 10px 0px 40px;
            width: 200px;
            height: 6px;
            vertical-align: middle;
            .border-radius(4px);
        }
        &:last-child {
            width: 5%;
            > label {
                width: auto;
            }
        }
    }
    > .finished {
        .round {
            border: 4px @stepsFinishedColor solid;
            background-color: @stepsFinishedColor;
            color: @stepsFinishedTextColor;
        }
        .bar {
            background-color: @stepsFinishedColor;
        }
    }
    > .current {
        .round {
            border: 4px @stepsCurrentColor solid;
            background-color: @stepsCurrentColor;
        }
        .bar {
            background-color: @stepsCurrentColor;
        }
    }
    > .todo {
        > label {
            color: @stepsTodoTextColor;
        }
        .round {
            border: 4px @stepsTodoColor solid;
            background-color: #FFF;
            color: @stepsTodoTextColor;
        }
        .bar {
            background-color: @stepsTodoColor;
        }
    }

}

.steps-round-auto {
    display: table;
    width: 100%;
    > div {
        display: table-cell;
        .bar {
            width: auto;
        }
    }
}
.steps-3 {
    > div {
        width: 50%;
    }
}
.steps-4 {
    > div {
        width: 33%;
    }
}
.steps-5 {
    > div {
        width: 25%;
    }
}
.steps-6 {
    > div {
        width: 20%;
    }
}
.steps-7 {
    > div {
        width: 16%;
    }
}
